<%--
  Created by IntelliJ IDEA.
  User: 22936
  Date: 2022/5/3
  Time: 21:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100%;
            background: url("./static/img/1.jpeg");
            background-size: 100% 100%;
        }

        #div_register {
            width: 30%;
            height: 60%;
            margin: 5% auto 0;
            border: whitesmoke solid 4px;
            border-radius: 15px;
            overflow: hidden;
        }

        #span_register {
            display: block;
            width: 100%;
            height: 20%;
            font-family: 黑体;
            color: hotpink;
            font-size: 40px;
            text-align: center;
            margin: 20px auto 0;
        }

        form span {
            display: inline-block;
            width: 100%;
            height: 15%;
            margin: 0 0 20px 20px;
            font-family: 黑体;
            color: whitesmoke;
            font-size: 25px;
            text-align: left;
        }

        #uName, #pwd1, #pwd2 {
            border: hotpink solid 1px;
            border-radius: 8px;
        }

        .btn {
            background-color: whitesmoke;
            border: hotpink solid 1px;
            border-radius: 5px;
        }

        #userInfo {
            text-decoration: none;
        }
    </style>

</head>
<body>
<div id="div_register">
    <span id="span_register">注册表</span>
    <form method="post" id="form_register">
        <span class="form_span">
            请输入用户名：<input style="display:inline-block;width: 40%;height: 60%" type="text" name="uName" id="uName"
                          onblur="check()" placeholder="请输入要注册的用户名"><a href="#" id="userInfo"></a>
        </span>
        <span class="form_span">
            &nbsp;&nbsp;请输入密码：<input style="display:inline-block;width: 40%;height: 60%" type="password" name="pwd1"
                                     id="pwd1" placeholder="请输入密码"></span>
        <span class="form_span">
            再次确认密码：<input style="display:inline-block;width: 40%;height: 60%" type="password" name="pwd2"
                          id="pwd2" placeholder="请再次输入密码" onblur="checkPwd()"></span>
        <span class="form_span">
        <input class="btn input_submit" style="display:inline-block;width: 13%;height: 60%;margin-left: 50px"
               type="button" value="注册" disabled onclick="register()">
        <a href="${pageContext.request.contextPath}/index.jsp"><input class="btn"
                                                                      style="display:inline-block;width: 13%;height: 60%;margin-left: 50px"
                                                                      type="button" value="返回"></a>
        <input class="btn" style="display:inline-block;width: 13%;height: 60%;margin-left: 50px" type="reset"
               value="重置数据"></span>
    </form>
</div>
</body>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script>
    function register() {

        $.post({
            url: "${pageContext.request.contextPath}/user/register",
            data: {'uName': $("#uName").val(), 'pwd': $("#pwd1").val()},
            success: function (data) {
                alert(data);
            }
        });

    }

    function check() {
        let checkUserName = $("#uName").val();
        if (checkUserName != "") {
            $.post({
                url: "${pageContext.request.contextPath}/user/check",
                data: {'uName': $("#uName").val()},
                success: function (data) {
                    if (data.toString() == '已存在') {
                        $("#userInfo").css("color", "red");
                        $(".input_submit").attr("disabled", true);
                    } else {
                        $("#userInfo").css("color", "green");
                    }
                    $("#userInfo").html(data);
                }
            });
        } else {
            alert("用户名不能为空！！！");
        }
    }

    function checkPwd() {
        let pw1 = $("#pwd1").val();
        let pw2 = $("#pwd2").val();
        if (pw1 != pw2) {
            alert("注意两次密码不一致！");
        } else {
            console.log("ok2");
            $('.input_submit').attr("disabled", false);
        }
    }
</script>
</html>
